<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <span class="tips">说明：目前只支持科目和关键字搜索</span>
          </el-col>
          <el-col :span="12">
            <el-button
              type="success"
              size="small"
              class="btn1"
              @click="$router.push('/questions/new')"
            >
              <i class="el-icon-edit" />
              <span>新增试题</span>
            </el-button>
          </el-col>

        </el-row>
        <!-- 表单 -->
        <el-form
          ref="questionForm"
          :inline="true"
          :model="formList"
          :rules="rules"
          label-width="80px"
        >
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select
                  v-model="formList.subjectID"
                  placeholder="请选择"
                  style="width:200px"

                  @change="changeCatalog"
                >
                  <el-option
                    v-for="item in subjects"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogList">
                <el-select v-model="formList.catalogList" placeholder="请选择" style="width:200px">
                  <el-option
                    v-for="item in catalogLists"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="formList.tags" placeholder="请选择" style="width:200px">
                  <el-option
                    v-for="item in tags"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keywords">
                <el-input v-model="formList.keywords" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="formList.questionType" placeholder="请选择" style="width:200px">
                  <el-option
                    v-for="(item, index) in questionTypes"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="formList.difficulty" placeholder="请选择" style="width:200px">
                  <el-option
                    v-for="(item, index) in difficultyLists"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="formList.direction" placeholder="请选择" style="width:200px">
                  <el-option
                    v-for="(item, index) in directions"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="manager">
                <el-select
                  v-model="formList.manager"
                  placeholder="请选择"
                  style="width:200px"
                  @focus="chioce"
                >
                  <el-option
                    v-for="(item, index) in managers"
                    :key="index"
                    :label="item.username"
                    :value="item.username"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="formList.remarks" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="enterprise">
                <el-input v-model="formList.enterprise" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" prop="city">
                <el-select
                  v-model="formList.city"
                  placeholder="请选择"
                  size="mini"
                  style="width: 90px"
                  @change="choiceProvience"
                >
                  <el-option
                    v-for="(item, index) in citysList"
                    :key="index"
                    :label="item.city"
                    :value="item"
                  >{{ item }}</el-option>
                </el-select>
                <el-select
                  v-model="formList.provienceList"
                  placeholder="请选择"
                  size="mini"
                  style="width: 90px"
                >
                  <el-option
                    v-for="(item, index) in provienceLists"
                    :key="index"
                    :label="item"
                    :value="item"
                  >{{ item }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button size="small" @click="clearText">清除</el-button>
                <el-button type="primary" size="small" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-alert
          type="info"
          show-icon
          :closable="false"
        >一共有{{ Page.total }}条数据
        </el-alert>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180" />
          <el-table-column prop="subject" label="学科" width="150" />
          <el-table-column prop="catalog" label="目录" width="130" />
          <el-table-column prop="questionType" label="题型">
            <template #default="{ row }">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template #default="{ row }">
              <span v-html="row.question" />
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template #default="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template #default="{ row }">
              <span v-if="row.difficulty === '1'">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="130" />
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-row>
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  title="预览"
                  @click="preview(row)"
                >
                  <i class="el-icon-view" />
                </el-button>
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  title="修改"
                  @click="routerChange(row)"
                />
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  title="删除"
                  @click="delBtn(row)"
                />
                <el-button
                  type="warning"
                  icon="el-icon-check"
                  circle
                  size="mini"
                  title="加入精选"
                  @click="addBtn(row)"
                />
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          :current-page.sync="Page.page"
          :page-sizes="[4, 6, 8,10]"
          :page-size="Page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <!-- 预览组件弹层 -->
    <questionsPrewiew
      :dialog-visible.sync="dialogFormVisible"
      :question-item="detail"
    />
  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '../../api/hmmm/questions'
import { simple } from '../../api/hmmm/subjects'
import { simple as simples } from '../../api/hmmm/directorys'
import { simple as simpless } from '../../api/hmmm/tags'
import { list as lists } from '../../api/base/users'
import questionsPrewiew from '../components/questions-preview.vue'
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
import { citys, provinces } from '../../api/hmmm/citys.js'
export default {
  components: {
    questionsPrewiew
  },
  data() {
    return {
      Page: {
        page: 1, // 当前页数
        size: 4, // 每页显示几条数据
        total: 0 // 一共有多少条数据
      },

      formList: {
        // 保存表单数据
        subjectID: '',
        catalogList: '',
        tags: '',
        difficulty: '',
        questionType,
        direction: '',
        manager: '',
        city: '',
        provienceList: '',
        remarks: '', // 备注
        keywords: '', // 关键字
        enterprise: '' // 企业简称
      },
      rules: {
        subjectID: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        catalogList: [
          { required: true, message: '请选择二级目录', trigger: 'change' }
        ],
        city: [
          {
            type: 'date',
            required: true,
            message: '请选择城市',
            trigger: 'change'
          }
        ],
        provienceList: [
          {
            type: 'date',
            required: true,
            message: '请选择省份',
            trigger: 'change'
          }
        ],
        tags: [
          {
            type: 'array',
            required: true,
            message: '请至少选择标签',
            trigger: 'change'
          }
        ],
        difficulty: [
          { required: true, message: '请选择难易程度', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题目类型', trigger: 'blur' }
        ],
        keywords: [
          { required: true, message: '请填写关键字', trigger: 'blur' }
        ],
        remarks: [{ required: true, message: '请填写关键字', trigger: 'blur' }],
        enterprise: [
          { required: true, message: '请填写关键字', trigger: 'blur' }
        ]
      },
      ableData: [], // 保存所有基础题目数据
      dialogFormVisible: false,
      detail: {}, // 基础题目详情
      subjects: [],
      catalogLists: [], // 二级目录数据
      tags: [], // 标签数据
      difficultyLists: difficulty, // 难度
      questionTypes: questionType, // 题目类型
      directions: direction, // 方向
      managers: [], // 录入人
      citysList: [], // 城市
      provienceLists: [], // 省份
      tableData: []// 保存表格数据
    }
  },

  created() {
    this.getQuestionsList()
    this.provinces()
  },
  methods: {
    // 获取所有题目数据
    async getQuestionsList() {
      const result = await list({
        page: this.Page.page,
        pagesize: this.Page.size
      })
      this.tableData = result.data.items
      this.Page.total = result.data.counts
      // 获取科学详情数据
      const data = await simple()

      this.subjects = data.data
    },
    // 根据科学详情获取二级目录和标签的详情
    async changeCatalog(value) {
      const { data } = await simples({ subjectID: value })
      this.catalogLists = data
      const { results } = await simpless({ subjectID: value })
      this.tags = results
    },
    // 录入人的数据请求
    async chioce() {
      const results = await lists()
      this.managers = results.data.list
    },
    // 按页面加载数据
    handleCurrentChange(val) {
      this.Page.page = val
      this.getQuestionsList()
    },
    // 每页显示条数发生改变
    handleSizeChange(val) {
      this.Page.size = val
      this.getQuestionsList()
    },
    // 预览按钮 获取题目详情
    async preview(row) {
      this.dialogFormVisible = true
      try {
        const data = await detail(row)
        this.detail = data.data
      } catch (error) {
        console.log(error)
      }
    },
    // 删除按钮
    async delBtn(row) {
      console.log(row)
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?')
        await remove(row)
        this.$message.success('删除成功')
        const totalPage = Math.ceil((this.Page.total - 1) / this.Page.size) // 总页数
        const currentPage = this.Page.page > totalPage ? totalPage : this.Page.page
        this.Page.page = currentPage < 1 ? 1 : currentPage
        this.getQuestionsList()
      } catch (error) {
        console.log(error)
      }
    },
    // 加入精选题库
    async addBtn(item) {
      console.log(item)
      try {
        await this.$confirm('确定加入精选题库吗？')
        await choiceAdd({ id: item.id, choiceState: 1 })
        this.$message.success('加入精选成功')
        this.getQuestionsList()
      } catch (error) {
        console.log(error)
      }
    },
    // 城市
    provinces() {
      this.citysList = provinces()
      console.log(this.citysList)
    },
    //  选择省份
    choiceProvience(val) {
      this.provienceLists = citys(val)
    },
    // 清除按钮
    clearText() {
      console.log(1)
      this.$refs.questionForm.resetFields()
      this.getQuestionsList()
    },
    // 搜索按钮
    async search() {
      // this.$refs.questionForm.validate()
      const results = await list({ subjectID: this.formList.subjectID, page: 1, pagesize: this.Page.size })
      this.Page.total = results.data.counts

      this.tableData = results.data.items
    },
    // 路由跳转
    routerChange(row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style scoped >
.btn1 {
  margin: 10px 5px;
  float: right;
}
.tips{
color: pink;
font-size: 12px;
}
.content {
  border-bottom: 2px solid #ccc;
  margin-bottom: 10px;
}
.btn2 {
  display: block;
  float: left;
  margin-right: 100px;
}
.middle {
  border-bottom: 2px solid #ccc;
}
.bottom {
  border-bottom: 2px solid #ccc;
}
.bottom2 {
  border-bottom: 2px solid #ccc;
  margin: 10px;
}
</style>
